<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

<html>
       <f:view>
          <head>
             <title>
                Create new account
             </title>
          </head>

          <body>
             <h1><h:outputText value="Create an Account"/></h1>
             <h:outputText value="" escape="false"/>


             <h:form id="newAccountForm">
             <h:outputText value="If you already have an Ochnas Volunteer Account, you can "/>
             <h:commandLink action="#{loginController.newLogin}">
                <h:outputText value="sign in here."/>
             </h:commandLink>       
				<h:outputText value="<br/><br/>" escape="false"/>
                <h:outputText id="summary"/>
                <h:message for="summary" style="color: Red" />
                <h:outputText value="<br/><br/>" escape="false"/>
                <h3><h:outputText style="color: #549BCA" 
                                  value="All information required for Ochnas volunteer account."/>
                </h3>
                
                 <h:panelGrid columns="2">
                
                   <h:outputText value="Your current email address : "/>
                   <h:panelGroup>
                      <h:inputText id="emailAddress" 
                         value="#{loginController.user.emailAddress}"/>
                      <h:message for="emailAddress" style="color: Red"/>
                   </h:panelGroup>
                   
                   <h:outputText value="Choose a password: "/>
                   <h:panelGroup>
                      <h:inputSecret id="password1" 
                                value="#{loginController.pwd1}"/>
                      <h:message for="password1" style="color: Red"/>
                   </h:panelGroup>
               
                   <h:outputText value="Re-enter password: "/> 
                   <h:panelGroup>
                      <h:inputSecret id="password2" 
                                value="#{loginController.pwd2}"/>
                      <h:message for="password2" style="color: Red"/>
                   </h:panelGroup>
                   
                   <h:outputText value="First name: "/>
                   <h:panelGroup>
                      <h:inputText id="firstName" 
                                value="#{loginController.user.firstName}"/>
                      <h:message for="firstName" style="color: Red"/>
                   </h:panelGroup>
                   
                   <h:outputText value=" Last name: "></h:outputText>
                   <h:panelGroup>
                      <h:inputText id="lastName" 
                                value="#{loginController.user.lastName}"/>
                      <h:message for="lastName" style="color: Red"/>
                   </h:panelGroup>
                   
                   <h:outputText value=" *Phone number: ">
                   </h:outputText>
                   <h:panelGroup>
                      <h:inputText id="contactPhoneNumber" 
                                value="#{loginController.user.contactPhoneNumber}">
                                
                                <f:validateLength maximum="10"/> 
                                </h:inputText>
					<h:message for="contactPhoneNumber" style="color: Red"/>
                   </h:panelGroup>
                 </h:panelGrid>
                 <p>* Enter phone number without '-' or space. Please include area code.</p>
                
                <h:panelGrid columns="2" cellspacing="15">
	                 <h:commandButton value="Save" action="#{loginController.saveAccount}"/>
	               
	                 <h:commandButton value="Cancel" action="#{loginController.newLogin}" immediate="true"/>
           		</h:panelGrid>
             </h:form>
          </body>
       </f:view>
    </html>